<template>
  <div class="movieTitle">订单管理</div>
  <el-table
    :data="
      pageData.orderlist.slice(
        (pageData.current - 1) * pageData.pagesize,
        pageData.current * pageData.pagesize
      )
    "
    style="width: 100%"
  >
    <el-table-column prop="oid" label="订单ID" width="120" />
     <el-table-column prop="cname" label="影院" width="120" />
    <el-table-column prop="time" label="时间段" width="180" />
     <el-table-column
      prop="chinese_name"
      label="中文名称"
      width="150"
      show-overflow-tooltip
    />
    <el-table-column
      prop="type"
      label="影片类型"
      width="150"
      show-overflow-tooltip
    />
    <el-table-column prop="length" label="影片时长" width="120" />
    <el-table-column prop="price" label="价格" width="120" />
    <el-table-column prop="r_name" label="厅号" width="120" />
    <el-table-column prop="seat" label="座位号" width="120" />
    <el-table-column prop="account" label="用户名" width="120" />
    <el-table-column prop="userphone" label="联系方式" width="150" />
    <el-table-column label="订单状态" width="120">
      <template v-slot="scope">
        <span v-if="scope.row.state == 1" style="color:green">创建成功</span>
        <span v-else-if="scope.row.state == 2" style="color:rgb(243, 178, 93)">等待审核</span>
        <span v-else-if="scope.row.state == 3" style="color: rgb(151, 146, 146);">已退票</span>
        <span v-else-if="scope.row.state == 4" style="color:rgb(243, 178, 93);">退票审核中...</span>
        <span v-else-if="scope.row.state == 5" style="color:rgb(121, 124, 126);">已失效</span>
        <span v-else>创建失败</span>
      </template>
    </el-table-column>
    <el-table-column
      :formatter="formatterTime"
      prop="create_time"
      label="创建时间"
      width="200"
    />
    <el-table-column fixed="right" width="180">
      <template #header>
        <el-input
          v-model="ordersearch"
          size="small"
          placeholder="用户名查询..."
        />
        <el-button size="small" @click="handleSearch()"
          ><el-icon><search /></el-icon
        ></el-button>
        <el-button size="small" @click="handleRef()"
          ><el-icon><refresh /></el-icon
        ></el-button>
        <!-- <el-button size="small" @click="handleAdd()"
          ><el-icon><plus /></el-icon
        ></el-button> -->
      </template>
      <template #default="scope">
        <el-button
          type="success"
          size="small"
          @click="handleEdit(scope.$index, scope.row)"
          ><el-icon><edit /></el-icon
        ></el-button>
        <el-button
          type="danger"
          size="small"
          @click="handleDelete(scope.$index, scope.row)"
          ><el-icon><delete /></el-icon
        ></el-button>
         <el-button
          v-if="scope.row.state==2 ||scope.row.state==4 "
          type="primary"
          size="small"
          @click="handleCheck(scope.$index, scope.row)"
          ><el-icon><Switch /></el-icon></el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--修改订单面版 -->
  <el-dialog v-model="dialogFormorderVisible" title="编辑订单">
    <el-form v-model="orderdialogData">
      <el-form-item label="订单ID" class="elstyle" label-width="60px">
        <el-input disabled v-model="orderdialogData.oid" />
      </el-form-item>
       <el-form-item label="影院" class="elstyle" label-width="100px">
        <el-input disabled v-model="orderdialogData.cname" />
      </el-form-item>
      <el-form-item label="时间段" class="elstyle" label-width="100px">
        <el-input disabled v-model="orderdialogData.time" />
      </el-form-item>
      <el-form-item label="中文名称" class="elstyle" label-width="100px">
        <el-input disabled v-model="orderdialogData.chinese_name" />
      </el-form-item>
      <el-form-item label="影片类型" class="elstyle" label-width="100px">
        <el-input disabled v-model="orderdialogData.type" />
      </el-form-item>
      <el-form-item label="影片时长" class="elstyle" label-width="100px">
        <el-input disabled v-model="orderdialogData.length" />
      </el-form-item>
      <el-form-item label="价格" class="elstyle" label-width="100px">
        <el-input v-model="orderdialogData.price" />
      </el-form-item>
      <el-form-item label="厅号" class="elstyle" label-width="100px">
        <el-input v-model="orderdialogData.r_name" />
      </el-form-item>
      <el-form-item label="座位号" class="elstyle" label-width="100px">
        <el-input v-model="orderdialogData.seat" />
      </el-form-item>
      <el-form-item label="用户名" class="elstyle" label-width="100px">
        <el-input disabled v-model="orderdialogData.account" />
      </el-form-item>
      <el-form-item label="联系方式" class="elstyle" label-width="100px">
        <el-input disabled v-model="orderdialogData.userphone" />
      </el-form-item>
      <el-form-item label="创建时间" class="elstyle" label-width="2000px">
        <el-input disabled v-model="orderdialogData.time" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormorderVisible = false">取消</el-button>
        <el-button type="primary" @click="updateorder">保存</el-button>
      </span>
    </template>
  </el-dialog>
  <!--分页 -->
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="pageData.current"
    layout="prev, pager, next,total,next,jumper"
    :total="pageData.total"
    :page-size="pageData.pagesize"
  />
</template>
<script lang="ts">
import { Delete, Refresh, Edit, Plus, Search,Switch} from "@element-plus/icons-vue";
import { computed, onMounted, reactive, ref, toRaw, toRefs,inject} from "vue";
import { Action, ElMessage,ElMessageBox} from "element-plus";
import { useStore } from "vuex";
export default {
  components: { Delete, Refresh, Edit, Plus, Search,Switch},
  setup() {
    interface Order {
      oid?: number;
      chinese_name: string;
      type: string;
      length: string;
      time: string;
      price: number;
      r_name: string;
      seat: string;
      account: string;
      userphone: string;
      cname: string;
      create_time: string;
    }
    const store = useStore();
    const ordersearch = ref("");
    let dialogFormorderVisible = ref(false);
    const reload=inject("reload",() => {})
    const orderdialogData = reactive({
      oid: 1,
      cname: "",
      chinese_name: "",
      type: "",
      length: "",
      time: "",
      price: "",
      r_name: "",
      seat: "",
      account: "",
      userphone: "",
      create_time: "",
      state:0,
    });
    onMounted(() => {
      handleRefs();
    });
    /**分页 */
    const pageData = reactive({
      current: 1, //当前页
      pagesize: 8, // 当前页显示多少条
      orderlist: ref([]),
      total: ref(0), //总数据
    });
    const arr =ref([])
    const temp =ref([])
    /**按条件搜索 */
    const handleSearch =() => {
      temp.value=arr.value.filter((item:any)=>{
        return item.account==ordersearch.value
      });
    };
    pageData.orderlist =computed({
          get:()=>{ return temp.value},
          set:(newvalue)=>{ temp.value=newvalue}
        }) as never;
    /**界面刷新 */
    const handleRefs = async () => {
      store.dispatch("SET_ORDERINFO").then(() => {
        arr.value=store.state.order.orderInfo
        temp.value=arr.value
        pageData.total = computed(()=>{return store.state.order.orderInfo.length}) as never;
      });
    };
    const formatterTime = (row: any, column: any) => {
      let date = new Date(row[column.property]);
      let year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      let month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      let hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      let seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    };
    const handleEdit = (index: number, row: Order) => {
      dialogFormorderVisible.value = true;
      let key: keyof Order;
      for (key in row) {
        orderdialogData[key] = row[key] as never;
      }
    };
    const handleRef =() => {
        reload();
    };
    const updateorder = () => {
      store.dispatch("SET_UPDATEORDER",orderdialogData).then(()=>{
             ElMessage({
            message: "修改成功",
            type: "success",
            center: true,
            grouping: true,
          });
          reload();
      }).catch(()=>{
        ElMessage.error("操作失败");
      })
    };
    const handleDelete = (index: number, row: any) => {
      store.dispatch("SET_DELETEORDER",row.oid).then(()=>{
          ElMessage({
            message: "删除成功",
            type: "success",
            center: true,
            grouping: true,
          });
          reload();
      }).catch(()=>{
        ElMessage.error("操作失败");
      })
    };
    const updateSeatState=reactive({
      id:0,
      flag:0
    })
    let updateOrderState=reactive({
        oid:0,
        state:0,
      })
    const handleCheck=(index:any,row:any)=>{
      ElMessageBox.confirm(
     '是否审核通过?',
    '提示：',
    {
      distinguishCancelAndClose:true,
      confirmButtonText: '通过',
      cancelButtonText: '不通过',
      type: 'warning',
    }
  )
    .then(() => {
      switch(row.state)
     {
      case 2:
      updateOrderState.oid=row.oid;
      updateOrderState.state=1;
      updateSeatState.id=row.sid;
      updateSeatState.flag=3;
      store.dispatch("SET_ORDERSTATE",updateOrderState);
      store.dispatch("SET_SEATSTATE",updateSeatState);
      break;
      case 4:
      updateOrderState.oid=row.oid;
      updateOrderState.state=3;
      updateSeatState.id=row.sid;
      updateSeatState.flag=0;
      store.dispatch("SET_ORDERSTATE",updateOrderState);
      store.dispatch("SET_SEATSTATE",updateSeatState);
      break;
     }
      reload();
      ElMessage({
        type: 'success',
        message: '审核通过',
      })
    })
    .catch((action:Action) => {
    if(action==="cancel"){
       switch(row.state)
     {
      case 2:
      updateOrderState.oid=row.oid;
      updateOrderState.state=5;
      updateSeatState.id=row.sid;
      updateSeatState.flag=0;
      store.dispatch("SET_ORDERSTATE",updateOrderState);
      store.dispatch("SET_SEATSTATE",updateSeatState);
      break;
      case 4:
      updateOrderState.oid=row.oid;
      updateOrderState.state=5;
      updateSeatState.id=row.sid;
      updateSeatState.flag=0;
      store.dispatch("SET_ORDERSTATE",updateOrderState);
      store.dispatch("SET_SEATSTATE",updateSeatState);
      break;
     }
      reload();
      ElMessage({
        type: 'info',
        message: '审核未通过',
      })
    };

    })
    }
    const handleSizeChange = (value: any) => {
      pageData.pagesize = value;
      pageData.orderlist = [];
      handleRefs();
    };
    const handleCurrentChange = (value: any) => {
      pageData.current = value;
      pageData.orderlist = [];
      handleRefs();
    };

    return {
      handleSizeChange,
      handleCurrentChange,
      handleRefs,
      pageData,
      formatterTime,
      dialogFormorderVisible,
      orderdialogData,
      handleEdit,
      handleSearch,
      ordersearch,
      handleRef,
      handleDelete,
      handleCheck,
      updateorder,
    };
  },
};
</script>
<style scoped>
.movieTitle {
  font-size: 1.5rem;
  margin: 20px 0 10px 0;
}
.introduction {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.el-table .cell {
  padding: 5px 12px;
}
.el-pagination {
  padding: 50px 10px;
  margin-left: 35rem;
}
.state{
  color: skyblue;
  border: 1px rgb(243, 178, 93) solid;
  box-shadow: 1px 1px 1px silver;
}
</style>
